<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"
            style="width: 500px;">

            <el-form-item label="用户头像" prop="userimage">
                <el-upload class="avatar-uploader" action="http://localhost:9000/upload" :show-file-list="false"
                    :on-success="uploadSuccess">
                    <img v-if="form.userimage" :src="form.userimage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户名称" prop="username">
                <el-input v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="用户密码" prop="password">
                <el-input show-password v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" prop="role">
                <el-select v-model="form.role" placeholder="请选择">
                    <el-option label="普通用户" value="0"></el-option>
                    <el-option label="会员用户" value="1"></el-option>
                    <el-option label="出入管理者" value="2"></el-option>
                    <el-option label="超级管理员" value="3" disabled="disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户电话" prop="usertel">
                <el-input v-model="form.usertel"></el-input>
            </el-form-item>
            <el-form-item label="预定车位" prop="booklotsnum">
                <el-input v-model="form.booklotsnum"></el-input>
            </el-form-item>
            <el-form-item label="车牌号" prop="usercarid">
                <el-input v-model="form.usercarid"></el-input>
            </el-form-item>
            <el-form-item label="用户余额" prop="balance">
                <el-input v-model="form.balance"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">修改</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
                role: '',
                usertel: '',
                booklotsnum: '',
                userimage: '',
                usercarid: '',
                balance: 0,
            },
            rules: {
                username: [
                    { required: true, message: '请填写用户名称', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写用户密码', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择用户角色', trigger: 'blur' }
                ],
                usertel: [
                    { required: true, message: '请填写用户电话', trigger: 'blur' }
                ],
                balance: [
                    { required: true, message: '请设置余额', trigger: 'blur' }
                ]
            },

        };
    },

    methods: {
        submitForm(formName) {
            //提交表单
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.userInfoApi.update(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.getOne();
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 请求用户信息
        getOne() {
            let params = { username: this.$route.query.username, size: 1, nowPage: 1 }
            this.$http.userInfoApi.queryUserByValue(params).then(res => {
                // console.log(res);
                this.form = res.data.data.result[0];
                this.form.role = this.form.role + '';
            })
        },
        // 文件上传成功的回调
        uploadSuccess(res, file) {
            this.form.userimage = res.data;
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted() {
        this.getOne();
    },
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>